<template>
	<view>
		<view class="head-bgc">
			<view class="h-bgc-cont">
				<view class="sch-img" >
					<image :src="details.pic" mode=""></image>
				</view>
				<view class="sch-cont">
					<view class="sch-box">
						<view class="sch-name">{{ details.school_name }}</view>
						<image class="sch-n-img" src="../../static/user.png" @click="clickStudentCard()"></image>
					</view>
					<view class="xy-fw">
						<view class="xy-count">
							校友数 {{ details.student_num }}
							&nbsp;&nbsp;|&nbsp;&nbsp;
							访问数 {{ details.visite_num }}
						</view>
					</view>
				</view>
			</view>
			<view class="head-bot-box">
				<navigator url="./phonebook" class="txl">
					<image src="../../static/txl.png" mode=""></image>
					<view class="txl-tit">通讯录</view>
				</navigator>
				<view class="txl">
					<image src="../../static/xyzp.png" mode=""></image>
					<view class="txl-tit">校友直聘</view>
				</view>
				<navigator url="./student_card" class="txl">
					<image src="../../static/yjxy.png" mode=""></image>
					<view class="txl-tit">引荐校友</view>
				</navigator>
				<navigator url="./help" class="txl">
					<image src="../../static/bbm.png" mode=""></image>
					<view class="txl-tit">帮帮忙</view>
				</navigator>
			</view>
			<view class="bot-cont-box">
				<view v-for="(item,index) in list" :key="index">
					<view class="line">
						<view></view>
					</view>
					<view class="head-cont">
						<view class="head-c-box">
							<image :src="item.user_info.head_img" mode=""></image>
							<view class="h-c-right">
								<view class="h-c-name">{{ item.user_info.stu_name }}</view>
								<view class="h-c-time">
									<text v-if="item.user_info.exp_job">{{ item.user_info.exp_job }}</text>
									<text v-if="item.user_info.exp_job" style="margin: 0 10upx;">|</text>
									<text v-else></text>
									<text>校脉通x</text>
								</view>
							</view>
						</view>
						<view @click="replyDetails(item.id)">
							<view class="h-content">{{ item.content }}</view>
						</view>
						<view class="cont-img">
							<image v-if="item.pic" v-for="pic,i in item.pic.split(`;`)" :key="i" :src="pic" @tap="previewImage(i)"></image>
							<view v-else></view>
						</view>
					</view>
					<view class="head-bottom">
						<view class="txl">
							<image src="../../static/fenxiang.png" mode=""></image>
							<view class="txl-tit">分享</view>
						</view>
						<view @click="replyDetails(item.id)" class="txl" style="margin: 0 20upx;">
							<image src="../../static/message.png" mode=""></image>
							<view class="txl-tit">{{ item.comment_num }}</view>
						</view>
						<view class="txl">
							<image src="../../static/dianzan2.png" mode=""></image>
							<view class="txl-tit">{{ item.praise_num }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bot-btn">
				<view style="margin-left: 124upx;">
					<image src="../../static/jhy.png" mode=""></image>
					<text>发打听</text>
				</view>
				<view style="margin-left: 60upx;" @click="clickDynamic()">
					<image src="../../static/fdt.png" mode=""></image>
					<text>发动态</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				page:1,
				id:'',
				name:'',
				details:[],
				listImg:[]
			}
		},
		onLoad(e) {
			this.id = e.school_id
			this.getSchoolDetails()
		},
		onShow() {
			this.getDynamic()
		},
		onReachBottom(){
			this.page = this.page+1
			this.getDynamic()
		},
		methods: {
			// 获取动态
			async getDynamic(){
				const res = await this.get('/index/Index/get_school_listen',{school_id: this.id, cur_page: this.page})
				if(res.data.length == 0){
					uni.showToast({
						title:"暂无更多内容",
						duration: 1000,
						icon: 'none'
					})
				}else{
					for(var i in res.data){
						this.list.push(res.data[i])
						this.listImg.push(res.data[i].pic)
						console.log("img:",this.listImg)
					}
				}
			},
			// 获取学校详情
			async getSchoolDetails(){
				const res = await this.get('/index/Index/get_school_info_by_id',{id: this.id})
				this.details = res.data
			},
			// 预览图片
			// previewImage(i){
			// 	uni.previewImage({
			// 		urls: this.listImg,
			// 		current: i,
			// 		loop:true
			// 	})
			// },
			replyDetails(id){
				uni.navigateTo({
					url: "./reply_details?listen_id="+id
				})
			},
			clickDynamic(){
				uni.navigateTo({
					url: "./dynamic?school_id="+this.id+ '&pid='+this.details.p_id
				})
			},
			clickStudentCard() {
				uni.navigateTo({
					url:'./student_card?school_id='+this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-bgc{
		width: 100%;
		height: 264upx;
		background: #3291F8;
		border-radius: 0 0 80upx 80upx;
		.h-bgc-cont{
			display: flex;
			padding: 34upx 44upx 62upx 32upx;
			.sch-img{
				image{
					width: 108upx;
					height: 108upx;
					border-radius: 15upx;
				}
			}
			.sch-cont{
				width: 100%;
				margin-left: 30upx;
				.sch-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 15upx;
					.sch-name{
						color: #FFFFFF;
						font-size: 40upx;
						font-weight: bold;
					}
					.sch-n-img{
						width: 28upx;
						height: 28upx;
					}
				}
				.xy-fw{
					color: #FFFFFF;
					font-size: 24upx;
				}
			}
		}
		.head-bot-box{
			display: flex;
			margin: 0 30upx 80upx 30upx;
			padding: 30upx 0;
			background: #FFFFFF;
			border-radius: 15upx;
			justify-content: space-around;
			box-shadow: 0 4upx 10upx 0 #d3d3d3;
			.txl{
				text-align: center;
				image{
					width: 60upx;
					height: 60upx;
					margin-bottom: 10upx;
				}
				.txl-tit{
					color: #343434;
					font-size: 28upx;
				}
			}
		}
		.bot-cont-box{
			padding-bottom: 150upx;
			.line{
				padding: 0 30upx;
				view{
					width: 100%;
					height: 2upx;
					background: #E1E3E6;
					margin: 54upx 0;
				}
			}
			.head-cont{
				.head-c-box{
					display: flex;
					padding: 0 30upx;
					margin-bottom: 24upx;
					image{
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
					}
					.h-c-right{
						margin-left: 24upx;
						.h-c-name{
							color: #101010;
							font-size: 28upx;
							margin-bottom: 10upx;
						}
						.h-c-time{
							color: #A9ABAE;
							font-size: 24upx;
						}
					}
				}
				.h-content{
					color: #101010;
					font-size: 28upx;
					line-height: 50upx;
					word-wrap:break-word;
					padding: 0 30upx 15upx 30upx;
					overflow: hidden !important;
					display: -webkit-box !important;
					text-overflow: ellipsis !important;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					position: relative;
				}
				.cont-img{
					display: flex;
					flex-flow: wrap;
					padding: 0 30upx;
					image{
						width: 226upx;
						height: 226upx;
						margin-bottom: 6upx;
					}
					image:nth-child(2),image:nth-child(5),image:nth-child(8){
						margin: 0 6upx;
					}
				}
			}
			.head-bottom{
				display: flex;
				justify-content: space-around;
				margin-top: 20upx;
				.txl{
					display: flex;
					align-items: center;
					image{
						width: 40upx;
						height: 40upx;
						margin-right: 7upx;
					}
					.txl-tit{
						color: #A9ABAE;
						font-size: 24upx;
					}
				}
			}
		}
		.bot-btn{
			width: 100%;
			height: 96upx;
			padding: 14upx 0;
			display: flex;
			background: #FFFFFF;
			border-top: 2upx solid #F0F0F0;
			position: fixed;
			left: 0;
			bottom: 0;
			view{
				height: 68upx;
				width: 220upx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				border: 2upx solid #E8E8E8;
				border-radius: 40upx;
				image{
					width: 40upx;
					height: 40upx;
					margin-right: 10upx;
				}
				text{
					color: #6A6A6A;
					font-size: 26upx;
				}
			}
		}
	}
</style>